<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加便签页</title>
    <link rel="stylesheet" type="text/css" href="tab.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
  <h4>Js 面对对象 动态添加便签页</h4>
  <div class="tabsbox" id="tab">
<!--      tab标签-->
    <nav class="fisrstnav">
        <ul>
            <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
            <li><span>测试2</span><span class="iconfont icon-guanbi"></span> </li>
            <li><span>测试3</span><span class="iconfont icon-guanbi"></span> </li>
        </ul>
        <div class="tabadd">
            <span>+</span>
        </div>
    </nav>
<!--      tab内容-->
    <div class="tabscon">
          <section class="conactive">测试1</section>
          <section>测试2</section>
          <section>测试3</section>
      </div>
  </div>
</main>
<script src="tab.js"></script>
</body>
</html>